<template>
  <!-- 创建时间：2023/4/30 -->
  <!-- 作者：LeiSir16 -->
  <!-- TotalSingerListPage组件说明：全部歌手页面-->
    <div class="total-singer">
        <div class="total-singer-header">
            <h1>歌手</h1>
            <div class="singer-condition-list" @click="showCondition">
                <div v-for="item in overviewCondition"
                     :data-level="item.level"
                     :class="{'active-with-bg':item.isChoose}">
                    {{ item.name }}
                </div>
                <div :data-level="moreTag.level"
                     :class="{'active-with-bg':moreTag.isChoose}">
                    {{ moreTag.name }}
                </div>
                <div class="level-area-choose" v-show="overviewCondition[1].isChoose">
                    <el-select v-model="curSingerLevelArea"
                               placeholder="请选择地区"
                               size="small"
                               @change="changeSingerLevelArea">
                        <el-option
                                v-for="item in singerLevelsArea"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="singer-detail-list" v-show="isShowTotalList">
                <!-- 歌手按字母排序-->
                <div class="others-tags"
                     v-for="(obj,objKey) of conditionList"
                     :data-listType="objKey">
                    <div v-for="item in obj"
                         class="tags"
                         :data-id="item.id"
                         :data-level="item.level"
                         @click="showCatSingers(objKey,item.level)">
                        <span :class="{'active-without-bg':item.isChoose}">{{ item.name }}</span>
                    </div>
                </div>
            </div>
        </div>
        <div :class="{'total-singer-list':true}"
             v-loading.fullscreen.lock="isLoading">
            <el-row v-for="rows in levelSingers.singers" :key="rows.id" style="margin-bottom: 1vh">
                <el-col :span="4" v-for="(columns,index) in rows.data" :key="columns.id" :offset="index === 0 ? 0 : 1">
                    <list-item :item-description="columns"/>
                </el-col>
            </el-row>
        </div>
        <!--加载更多按钮-->
        <div class="total-singer-load-more" v-show="levelSingers.more">
            <span @click="loadMoreData">加载更多</span>
        </div>
        <BackToHead/>
    </div>
</template>

<script>
import {mapGetters, mapState} from "vuex";
import {nanoid} from "nanoid";
import {getCatSingers, getSingerLevel} from "@/http";
import ListItem from "@/minicomponents/ListItem.vue";
import {COLUMNS, SINGERLIST} from "@/http/constant";
import {formatArray} from "@/http/tools";
import BackToHead from "@/minicomponents/BackToHead.vue";

export default {
    name: "TotalSingerListPage",
    components: {BackToHead, ListItem},
    data() {
        return {
            conditionList: {},
            isShowTotalList: false,
            overviewCondition: [
                {
                    name: '全部',
                    level: -1,
                    isChoose: true
                },
                {
                    name: '榜单',
                    level: -2,
                    isChoose: false
                }
            ],
            moreTag: {
                name: '···',
                level: -3,
                isChoose: false
            },
            singerLevelsArea: [
                {
                    label: '华语',
                    value: 1
                },
                {
                    label: '欧美',
                    value: 2
                },
                {
                    label: '韩国',
                    value: 3
                },
                {
                    label: '日本',
                    value: 4
                }
            ],
            curSingerLevelArea: 1,
            // 榜单的歌手
            levelSingers: {},
            isLoading: false,
            limit: 30,
            offset: 0
        }
    },
    methods: {
        // 格式化选项列表
        formatConditionList() {
            const {singerArea, singerType, singerName} = this
            const newSingerArea = singerArea.map(item => {
                return {
                    ...item,
                    id: nanoid(),
                    isChoose: item.level === -1
                }
            })
            const newSingerType = singerType.map(item => {
                return {
                    ...item,
                    id: nanoid(),
                    isChoose: item.level === -1
                }
            })
            const newSingerName = singerName.map(item => {
                return {
                    ...item,
                    id: nanoid(),
                    isChoose: item.level === '-1'
                }
            })
            this.conditionList = {
                singerName: newSingerName,
                singerArea: newSingerArea,
                singerType: newSingerType,
            }
        },
        // 显示筛选条件
        showCondition(e) {
            const {level} = e.target.dataset
            if (level !== '-3') {
                // 判断当前点击的是否是已经选择的选项，如果是就不用请求数据直接返回
                const curChoose = this.overviewCondition.filter(item => {
                    return item.level.toString() === level
                })
                if (curChoose[0].isChoose) {
                    return
                }
            }
            if (level === '-1') {
                this.overviewCondition = this.overviewCondition.map(item => {
                    if (item.level.toString() === level) {
                        return {
                            ...item,
                            isChoose: true
                        }
                    } else {
                        return {
                            ...item,
                            isChoose: false
                        }
                    }
                })
                for (const key in this.conditionList) {
                    this.conditionList[key].forEach((item, index) => {
                        if (item.level.toString() === '-1') {
                            this.$set(this.conditionList[key], index, {
                                ...item,
                                isChoose: true
                            })
                        } else {
                            this.$set(this.conditionList[key], index, {
                                ...item,
                                isChoose: false
                            })
                        }
                    })
                }
                this.getSingers(-1, -1, -1)
            } else if (level === '-2') {
                this.overviewCondition = this.overviewCondition.map(item => {
                    if (item.level.toString() === level) {
                        return {
                            ...item,
                            isChoose: true
                        }
                    } else {
                        return {
                            ...item,
                            isChoose: false
                        }
                    }
                })
                this.getSingerLevelList(this.curSingerLevelArea)
            } else {
                // 取消选择榜单标签
                this.overviewCondition = this.overviewCondition.map(item => {
                    if (item.level.toString() === '-2') {
                        return {
                            ...item,
                            isChoose: false
                        }
                    } else {
                        return {
                            ...item
                        }
                    }
                })
                // 显示更多的筛选标签
                this.isShowTotalList = !this.isShowTotalList
                // 更新更多标签状态
                this.moreTag = {
                    ...this.moreTag,
                    isChoose: this.isShowTotalList
                }
                // 只有筛选列表展开的时候才需要更新页面展示的数据
                if (this.isShowTotalList) {
                    // 获取当前状态并更新当前列表
                    const {name, type, area} = this.getCatListChoose()
                    this.getSingers(type.level, area.level, name.level)
                }
            }
        },
        // 格式化歌手的信息
        formatSingers(artists) {
            return artists.map(rowItem => {
                return {
                    id: rowItem.id,
                    data: rowItem.data.map(columnItem => {
                        return {
                            id: columnItem.id,
                            title: columnItem.name,
                            picUrl: columnItem.img1v1Url,
                            hasPlayCount: false,
                            isCircle: true,
                            hasAuthor: false,
                            titleIsLeft: false,
                            alias: JSON.parse(JSON.stringify(columnItem.alias)),
                            musicSize: columnItem.musicSize,
                            itemType: SINGERLIST,
                            hasPlayIcon: true,
                        }
                    })
                }
            })
        },
        // 获取指定地区的歌手榜单
        getSingerLevelList(type) {
            this.isLoading = true
            getSingerLevel(type).then(res => {
                const {list: {artists, updateTime, type}} = res
                const newSingers = this.formatSingers(formatArray(artists.length / COLUMNS, COLUMNS, artists))
                this.levelSingers = {
                    singers: newSingers,
                    // 原始数据用于加载更多数据
                    originSingers: artists,
                    more: false,
                    updateTime,
                    type
                }
                this.isLoading = false
            })
        },
        // 获取分类歌手列表
        getSingers(type, area, initial, loadMore = false) {
            this.isLoading = true
            const {limit, offset} = this
            getCatSingers(type, area, initial, limit, offset).then(res => {
                const {artists, more} = res
                if (loadMore) {
                    const {originSingers} = this.levelSingers
                    const newSingers = [...originSingers, ...artists]
                    const singers = this.formatSingers(formatArray(newSingers.length / COLUMNS, COLUMNS, newSingers))
                    this.levelSingers = {
                        singers: singers,
                        originSingers: newSingers,
                        more
                    }
                } else {
                    // 加载新的数据
                    const newSingers = this.formatSingers(formatArray(artists.length / COLUMNS, COLUMNS, artists))
                    this.levelSingers = {
                        singers: newSingers,
                        originSingers: artists,
                        more
                    }
                }
                // 更新分页量
                this.offset += limit
                this.isLoading = false
            })
        },
        // 切换歌手的地区
        changeSingerLevelArea(value) {
            this.getSingerLevelList(value)
        },
        // 获取筛选列表中当前的选择
        getCatListChoose() {
            const {singerName, singerArea, singerType} = this.conditionList
            const name = singerName.filter(item => {
                return item.isChoose === true
            })[0]
            const area = singerArea.filter(item => {
                return item.isChoose === true
            })[0]
            const type = singerType.filter(item => {
                return item.isChoose === true
            })[0]
            return {
                name,
                area,
                type
            }
        },
        showCatSingers(catagory, level) {
            // 选中列表中的某一项
            const list = this.conditionList[catagory]
            const newList = list.map(item => {
                if (item.level.toString() === level.toString()) {
                    return {
                        ...item,
                        isChoose: true
                    }
                }
                return {
                    ...item,
                    isChoose: false
                }
            })
            this.$set(this.conditionList, `${catagory}`, newList)
            const {name, type, area} = this.getCatListChoose()
            if (name.level.toString() === '-1' && area.level.toString() === '-1' && type.level.toString() === '-1') {
                this.$set(this.overviewCondition[0], 'isChoose', true)
            } else {
                this.$set(this.overviewCondition[0], 'isChoose', false)
            }
            this.getSingers(type.level, area.level, name.level)
        },
        // 加载更多数据
        loadMoreData() {
            const {name, area, type} = this.getCatListChoose()
            this.getSingers(type.level, area.level, name.level, true)
        }
    },
    created() {
        this.formatConditionList()
        this.getSingers(-1, -1, -1)
    },
    computed: {
        ...mapState(["singerArea", "singerType"]),
        ...mapGetters(["singerName"]),
    }
}
</script>

<style scoped lang="less">
@import "@/assets/less/common";

.total-singer {
  user-select: none;


  .total-singer-header {
    > h1 {
      font-size: 2.5vw;
      margin-top: 0;
    }

    //筛选标签部分
    .singer-condition-list {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      //多行的时候要换行
      font-size: .7vw;
      font-weight: 700;
      margin-bottom: .5vw;

      > div:not(:last-child) {
        margin-right: .6vw;
      }

      > div:not(:last-child) {
        padding: 0.5vw;
        background-color: @mouseHover;
        opacity: .7;
        border-radius: .5vw;
        text-align: center;
        cursor: pointer;
        transition: all .1s ease;
      }

      > div:not(:last-child):hover {
        background-color: @bgColor;
        color: @mainColor;
      }

      .level-area-choose {
        flex: 1;
        display: flex;
        justify-content: flex-end;

        .el-select {
          width: 6vw;
        }
      }

      //当点击的时候激活其背景显示
      .active-with-bg {
        background-color: @bgColor;
        color: @mainColor;
      }
    }

    .singer-detail-list {
      background-color: @mouseHover;
      padding: .7vw .7vw 0 .7vw;
      border-radius: .5vw;
      opacity: .7;

      .others-tags {
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        padding-top: .15vw;
        font-size: .7vw;

        .tags {
          width: 3vw;
          margin-bottom: .5vw;

          > span {
            padding: .3vw .5vw;
            border-radius: .3vw;
            cursor: pointer;

            &:hover {
              background-color: @bgColor;
              color: @mainColor;
            }
          }

          .active-without-bg {
            color: @mainColor;
            background-color: @bgColor;
          }
        }
      }

      .others-tags:not(:last-child) {
        margin-bottom: .5vw;
      }

      .others-tags:first-child {
        .tags:not(:first-child) {
          width: 2.5vw;
        }
      }
    }
  }

  .total-singer-list {
    margin-top: 1.5vw;
  }

  .empty {
    height: 10vh;
  }

  //加载更多按钮
  .total-singer-load-more {
    text-align: center;
    font-size: .85vw;
    font-weight: 700;
    margin: .8vw 0;

    > span {
      display: inline-block;
      width: 5vw;
      height: 1.8vw;
      line-height: 1.8vw;
      opacity: .7;
      background-color: @mouseHover;
      border-radius: .5vw;
      cursor: pointer;
      transition: all .2s ease;

      &:hover {
        background-color: @bgColor;
        color: @mainColor;
      }
    }
  }
}
</style>